<template>
	<view class="">
		<view class="mengComse">
			<view class="header borde-padd-24">
				<view class="header-left" @click="goPages">
					<image class="img" :src="imgUrl+'/right.png'" mode=""></image>
				</view>
			</view>
			<view style="height: 90rpx;"></view>
			
			<view class="heaemsnem">
				<image style="width: 32rpx;height: 32rpx;margin-right: 20rpx;" src="../../static/mes.png" mode=""></image>
				行测基础题库
			</view>
			<view class="zhenbgq">
				正确率
			</view>
			<view  class="score">
				<text class="scoreMes">{{score}}</text>
				<text class="fen">%</text>
			</view>
			<view class="scoreimges">
				<view >
					<image class="im" v-if="score<30" src="../../static/score.png" mode=""></image>
					<image class="im" v-else src="../../static/fen.png" mode=""></image>
				</view>
				<view >
					<image class="im"  v-if="score<60" src="../../static/score.png" mode=""></image>
					<image class="im" v-else src="../../static/fen.png" mode=""></image>
				</view>
				<view >
					<image class="im" v-if="score<100" src="../../static/score.png" mode=""></image>
					<image class="im" v-else src="../../static/fen.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="">
			<view class="cimenas">
				<view class="titles">题数</view>
				<view class="sues">{{leng}}</view>
			</view>
			<view class="cimenas">
				<view class="titles">答对题数</view>
				<view class="sues">{{num}}</view>
			</view>
			<view class="cimenas">
				<view class="titles">用时</view>
				<view class="sues">{{duration}}</view>
			</view>
		</view>
		<view class="conmenYefooye">
			<view class="btn" @click="goPages">继续练习</view>
			<view class="btn cmens" @click="openUel" analysis>查看解析</view>
		</view>
	</view>
</template>

<script>
export default{
		data(){
			return {
				imgUrl:this.imgUrl,
				duration:'',
				score:"",
				num:'',
				leng:'',
				idUes:'',
			}
		},
		onLoad(e) {
			let {duration,num,leng,score,id}= e;
			this.score=score;
			this.duration=duration;
			this.num=num;
			this.idUes=id;
			this.leng=leng;
		},
		methods:{
			openUel(){
				uni.navigateTo({
					url:`/record/practice/analysis?id=${this.idUes}`
				})
			},
			goPages(path){
				uni.navigateBack({ delta: 1 })
			},
		}
	}
	
</script>

<style>
	.mengComse{
		width: 750rpx;
		height: 589rpx;
		background: linear-gradient( 90deg, #3B5EEC 0%, #2F97E3 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.header{
		height: 90rpx;
		position: fixed;
		left: 0;
		line-height: 90rpx;
		box-sizing: border-box;
		width: 100%;
	}
	.title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		width: 100%;
		color: #0D0E0F;
		margin: 0 auto;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.header-left {
		position: absolute;
		left: 24rpx;
		top: 50%;
		transform: translate(0,-50%);
	}
	.header-left .img{
		width: 30rpx;
		height: 30rpx;
		transform: rotate(-180deg);
	}
	.heaemsnem{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		font-style: normal;
		text-transform: none;
	}
	.zhenbgq{
		text-align: center;
		padding-top: 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		font-style: normal;
		text-transform: none;
	}
	.score{
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: MiSans, MiSans;
		font-weight: 600;
		font-size: 114rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.score .fen{
		width: 29rpx;
		height: 42rpx;
		font-family: MiSans, MiSans;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 0rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.scoreimges{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.scoreimges .im{
		width: 40rpx;
		height: 40rpx;
	}
	.cimenas{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 702rpx;
		height: 131rpx;
		background: #F7F8FA;
		margin: 0 auto;
		margin-top: 24rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-family: MiSans, MiSans;
		font-weight: 600;
		font-size: 32rpx;
		color: #0D0E0F;
		font-style: normal;
		text-transform: none;
	}
	.cimenas .titles{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #646669;
		font-style: normal;
		text-transform: none;
	}
	.conmenYefooye{
		width: 750rpx;
		background: #FFFFFF;
		position: fixed;
		padding: 0 24rpx;
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		bottom: 0;
		padding-top: 9rpx;
		box-shadow: 0rpx -10rpx 10rpx 1rpx rgba(0,0,0,0.05);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding-bottom: 90rpx;
	}
	.conmenYefooye .btn{
		width: 340rpx;
		text-align: center;
		line-height: 80rpx;
		height: 80rpx;
		background: #E5E8F7;
		color: #3B5EEC;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
	.conmenYefooye .cmens{
		color: #FFFFFF;
		background-color: #3B5EEC;
	}
</style>